<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 最新 Bootstrap4 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script	src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script	src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- DaterangePicker -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{./daterangepicker/daterangepicker.css}" />
<!-- BootStrapValidator -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script th:src="@{./js/functions.js}"></script>
<script type="text/javascript">
</script>
</head>

<body>
	<div class="bg-secondary">
	<div class="container-fluid ">
	<div class="row h-6 w-100 p-3">
		<nav class="navbar navbar-expand-md bg-dark navbar-dark container-fluid">
			<div class="img-fluid"><img th:src="@{/img/logo_1.png}" /></div>
			<a class="navbar-brand" href="#">YIN—MUSICS后台管理</a>
			
<!-- 按钮边框 -->
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		 
		 
			<div></div>
			<br/>
			<br/>
			<br/>
			<br/>
			<div class=" d-flex justify-content-end w-100">
		  <ul class="navbar-nav">
		    
			<li class="nav-item dropdown">
			  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">admin</a>
			  <div class="dropdown-menu">
			    <a class="dropdown-item" href="#">退出</a>
			    <a class="dropdown-item" href="#">Another action</a>
			    <a class="dropdown-item" href="#">Something else here</a>
			    <div class="dropdown-divider"></div>
			    <a class="dropdown-item" href="#">Separated link</a>
			  </div>
			</li>
		  </ul>
		  </div>
		  </div>
		</nav>
		
		<div class="row vh-100 container-fluid">
		<div class="bg-dark col-sm-2 clearfix">
			<br>
		<!-- 侧边功能栏 -->
		<ul class="nav flex-column">
			<!--  
		  <li class="">
		    <a href="#sub1" class="nav-link active text-white bg-dark" data-toggle="collapse" href="#">Active</a>
			
			<ul id="sub1" class="nav collapse flex-column">
			<li><a class="nav-link" href ="#">系统管理</a></li>
			<li><a class="nav-link" href ="#">系统管理</a></li>
			<li><a class="nav-link" href ="#">系统管理</a></li>
			</ul>
			
		  </li>
		  -->
		  <li class="nav-item">
			 
		    <a class="nav-link text-white bg-dark" href="#"><img style="height:25px; width:25px;" th:src="@{/img/yinle1.png}" />&nbsp;&nbsp;系统首页</a>
			
		  </li>
		  
		  <li class="nav-item">
			  
		    <a class="nav-link text-white bg-dark" th:href="@{/user/getUserList}"><img  style="height:25px; width:25px;" th:src="@{/img/yinle2.png}"/>&nbsp;&nbsp;用户管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" th:href="@{/singer/getSingerList}"><img  style="height:25px; width:25px;" th:src="@{/img/yinle3.png}"/>&nbsp;&nbsp;歌手管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" th:href="@{/sheet/getGedanList}"><img  style="height:25px; width:25px;" th:src="@{/img/yinle4.png}"/>&nbsp;&nbsp;歌单管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" th:href="@{/mv/getList}"><img  style="height:25px; width:25px;" th:src="@{/img/yinle5.png}"/>&nbsp;&nbsp;MV管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" th:href="@{/album/getAlbumList}"><img style="height:25px; width:25px;" th:src="@{/img/yinle6.png}"/>&nbsp;&nbsp;专辑管理</a>
		  </li>
		</ul>
		</div>


<div class="col-md-10 flex-column bg-light">
		<hr >
	<div class=row>
	<div class=col-md-12>
	<form class="form-inline" role="form" id="searchForm" th:method="post" th:action="@{/album/searchAlbumList}"> 
	<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
		  添加专辑
		</button>
		  
	                       <div class="form-group col-md-2 offset-1">                           
	                           <input class="form-control input-sm" type="text" id="album_name" name="album_name" placeholder="专辑名" th:value="${param.album_name}"/>
	                       </div>
	                     
	                       <div class="form-group col-md-2">      
	                           <button class="btn btn-primary btn-sm" type="submit" >搜索</button>
	                      </div>
						  <div ></div>
	               </form>  
	</div>
	</div>
	<hr />
	<div>
	
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
			<th>#</th>
			<th>歌手id</th>
			<th>专辑名</th>
			<th>发行时间</th>
			<th>包含歌曲数</th>
		    <th>图片</th>
			
			
			
			
			<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<tr th:each="u,stat:${getlist}">
			<td th:text="${stat.count}">1</td>
			<td th:text="${u.singer_id}">歌手id</td>
			<td th:text="${u.album_name}">星</td>
			<td th:text="${u.issuedate}">2019年7月1日</td>
			<td th:text="${u.song_num}">9</td>
			<td><img style="height:100px; width:100px;" th:src="${u.album_pic}"></td>
			
			
			
			
			<td>
				<a type="button" href="#" class="btn btn-primary" th:href="@{/album/getList(album_id=${u.album_id})}">修改</a>
				<a type="button" class="btn btn-danger"  th:href="@{/album/deleteAlbum(album_id=${u.album_id})}" onclick="return confirm('确定要删除吗')">删除</a>
				
				</td>
			</tr>
			<span class="bg-shouye_3"></span>
			
			<div class="modal fade w-100" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLongTitle">请填写注册信息</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        <div class="">
		        			<div class="flex-column w-100">
		        				<form class="form" id="regForm" th:method="post" th:action="@{/album/addAlbum}">
		        					
		        					
		        					<div class="form-group row">
		        							<div class="col-md-4">
		        								<label for="singer_id">歌手id</label>
		        							</div>
		        							<div class="col-md-6">
		        								<input type="text" id="singer_id" name="singer_id"
		        									class="form-control input-sm" placeholder="歌手id"  />
		        							</div>
		        						</div>
		        					<div class="modal-body">
		        						<div class="form-group row">
		        							<div class="col-md-4">
		        								<label for="album_name">专辑名</label>
		        							</div>
		        							<div class="col-md-6">
		        								<input type="text" id="album_name" name="album_name" 
		        									class="form-control input-sm" placeholder="专辑名" required /> <span
		        									id="result"></span>
		        							</div>
		        						</div>
										
										
		        						<div class="form-group row">
		        							<div class="col-md-4">
		        								<label for="issuedate">发行时间</label>
		        							</div>
		        							<div class="col-md-6">
		        								<input type="text" id="issuedate" name="issuedate"
		        									class="form-control input-sm" placeholder="发行时间"  />
		        							</div>
		        						</div>
		        
		        						
		        
		        						<div class="form-group row">
		        							<div class="col-md-4">
		        								<label for="song_num">包含歌曲数</label>
		        							</div>
		        							<div class="col-md-6">
		        								<input type="text" id="song_num" name="song_num"
		        									class="form-control input-sm" placeholder="包含歌曲数" />
		        							</div>
		        						</div>
		        
		        			
		        
		        						
		        
		        						
		        
		        						
		        
		        					</div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		        <button type="submit" class="btn btn-primary">添加</button>
		      </div>
		    </div>
		  </div>
</table>
</div>
</div>
</div>
</body>
</html>